<template>
  <div>
    <myDivider name="用户管理"></myDivider>
    <div style="margin-left: 20px;">
      <el-input style="width: 150px;" v-model="query.userCode" placeholder="用户账号" @keyup.enter.native="SouSuo"
        clearable></el-input>
      <el-input style="width: 150px;" v-model="query.userName" placeholder="用户姓名" @keyup.enter.native="SouSuo"
        clearable></el-input>
      <el-select style="width: 150px;" placeholder="请选择账号类型" v-model="query.userType" clearable @change="SouSuo">
        <el-option v-for="item, i in unitTypeData" :key="i" :label="item.label" :value="item.value"></el-option>

      </el-select>
      <el-select style="width: 150px;" placeholder="请选择状态" v-model="query.userState" clearable @change="SouSuo">
        <el-option label="正常" value="1"></el-option>
        <el-option label="禁用" value="2"></el-option>
      </el-select>
      <el-button type="primary" style=" margin-left: 15px" @click="SouSuo">查询</el-button>
      <el-button style=" margin-left: 15px" @click="Reset">重置</el-button>
      <div style="margin-top: 10px">
        <el-button type="primary" @click="addClick">新增</el-button>
      </div>
    </div>
    <!-- 表格 -->
    <div>
      <el-table :data="userData" style="width: 100%" class="menuTable" row-key="uid"
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">

        <el-table-column align="center" prop="account" label="用户账号" width="150">
        </el-table-column>
        <el-table-column align="center" prop="unitType" label="用户类型" width="150">
          <template slot-scope="scope">
            <span>{{ scope.row.unitType == 'system' ? '系统用户' : scope.row.unitType == 'agency' ? '机关' : "机构" }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="name" label="姓名" width="150">
        </el-table-column>
        <el-table-column align="center" prop="unitNameList" label="单位名称">
          <template slot-scope="scope">
            <el-tooltip class="item" effect="dark" :content="scope.row.unitNameList" placement="top-start">
              <span>{{ scope.row.unitNameList == null ? '—' : scope.row.unitNameList.length > 8 ?
                "..." + scope.row.unitNameList.substring(scope.row.unitNameList.length - 8,
                  scope.row.unitNameList.length) : scope.row.unitNameList }}</span>
            </el-tooltip>
          </template>
        </el-table-column>


        <el-table-column align="center" prop="roleNames" label="角色" width="150">
          <template slot-scope="scope">
            <el-tooltip class="item" effect="dark" :content="scope.row.roleNames" placement="top-start">
              <span>{{ scope.row.roleNames == null ? '—' : scope.row.roleNames.length > 8 ?
                "..." + scope.row.roleNames.substring(scope.row.roleNames.length - 8,
                  scope.row.roleNames.length) : scope.row.roleNames }}</span>
            </el-tooltip>
          </template>
        </el-table-column>

        <el-table-column align="center" prop="status" label="账号状态" width="80">
          <template slot-scope="scope">
            <div style="display: flex;align-items: center;justify-content: space-evenly;">
              <div style="width: 10px;height: 10px;border-radius: 100px;"
                :style="{ backgroundColor: scope.row.status == '2' ? 'red' : '#409eff' }"></div>
              <span>{{ scope.row.status == '2' ? '禁用' : "正常" }}</span>
            </div>
          </template>
        </el-table-column>


        <el-table-column align="center" prop="status" label="公开" v-if="unitType == 'company'" width="60">
          <template slot-scope="scope">
            <el-switch v-model="scope.row.isPublic" active-color="#13ce66" inactive-color="#ff4949" active-value='1'
              inactive-value='0' @change="changePublic(scope.row)">
            </el-switch>
          </template>
        </el-table-column>

        <el-table-column align="center" prop="createTime" label="创建时间">
        </el-table-column>

        <el-table-column align="center" label="操作" width="180px">
          <template slot-scope="scope">

            <div class="textBtn">
              <el-row>
                <el-col class="el" :span="6">
                  <span style="color: #5fadff;cursor: pointer;font-weight: 600;"
                    @click="UpdateClick(scope.row)">编辑</span>
                </el-col>
                <el-col class="el" :span="12">
                  <span style="color: #5fadff;cursor: pointer;font-weight: 600;"
                    @click="openBindingForm(scope.row)">绑定信息</span>
                </el-col>
                <el-col class="el" :span="6">
                  <span style="color: #5fadff;cursor: pointer;font-weight: 600;"
                    @click="deleteUserById(scope.row)">删除</span>
                </el-col>
              </el-row>
            </div>
          </template>
        </el-table-column>
      </el-table>

    </div>
    <!-- 添加用户弹窗 -->
    <el-dialog :title="AddUserPopScene === 'add' ? '添加用户' : '修改用户'" :visible.sync="AddUserPopShow" class="dialogStyle"
      width="600px" :close-on-click-modal="false">

      <el-divider></el-divider>
      <el-form :model="insertForm" :rules="insertRules" ref="insertForm">


        <el-form-item label="用户账号:" :label-width="formLabelWidth" class="formItemStyle" prop="account">
          <el-input size="medium" v-model="insertForm.account" placeholder="请输入本人手机号" autocomplete="off"
            style="width: 325px" @blur="accountBlur"></el-input>
        </el-form-item>
        <el-form-item label="用户姓名:" :label-width="formLabelWidth" class="formItemStyle" prop="name">
          <el-input size="medium" v-model="insertForm.name" autocomplete="off" style="width: 325px"
            placeholder="请输入姓名"></el-input>
        </el-form-item>

        <el-form-item label="用户密码:" :label-width="formLabelWidth" class="formItemStyle" prop="password">
          <el-input size="medium" v-model="insertForm.password" class="no-autofill-pwd" type="text" style="width: 325px"
            placeholder="请输入密码"></el-input>
        </el-form-item>

        <el-form-item label="用户类型:" :label-width="formLabelWidth" class="formItemStyle" prop="unitType">
          <div class="block">
            <el-select :disabled="LoginUserData.unitType == 'agency' || LoginUserData.unitType == 'company'"
              @change="unitTypeChange" size="medium" style="width: 325px" placeholder="请选择机关类型"
              v-model="insertForm.unitType" clearable>
              <!-- <el-option v-for="item, i in unitTypeData" :key="i" :label="item.label" :value="item.value"></el-option> -->
              <div v-if="LoginUserData.unitType == 'system'">
                <el-option label="系统管理员" value="system"></el-option>
                <el-option label="机关管理员" value="agency"></el-option>
                <el-option label="机构管理员" value="company"></el-option>

              </div>
              <div v-if="LoginUserData.unitType == 'agency'">
                <el-option label="机关管理员" value="agency"></el-option>
              </div>
              <div v-if="LoginUserData.unitType == 'company'">
                <el-option label="机构管理员" value="company"></el-option>
              </div>
            </el-select>
          </div>
        </el-form-item>

        <el-form-item v-if="LoginUserData.unitType != 'system'" label="所属单位:" :label-width="formLabelWidth"
          class="formItemStyle" prop="unitName">
          <div class="block">
            <el-input v-model="insertForm.unitName" size="medium" style="width: 325px" disabled></el-input>
          </div>
        </el-form-item>
        <el-form-item
          v-if="LoginUserData.unitType == 'system' && (insertForm.unitType == 'company' || insertForm.unitType == 'agency')"
          label="所属单位:" :label-width="formLabelWidth" class="formItemStyle" prop="" required>
          <div class="block" style="display: flex;">
            <el-button size="medium" type="" @click="toSelectUnit">选择</el-button>
            <el-input v-model="insertForm.unitName" size="medium" style="width: 250px;margin-left: 10px;" disabled
              placeholder="请点击按钮进行选择"></el-input>
          </div>
        </el-form-item>

        <el-form-item label="用户角色:" :label-width="formLabelWidth" class="formItemStyle" prop="" required>
          <div class="block" style="display: flex;">
            <el-button size="medium" type="" @click="toSelectUser">选择</el-button>
            <el-select @change="changeUserSelect" style="margin-left:10px ;width: 250px;" collapse-tags
              v-model="insertForm.roleIds" multiple placeholder="请点击按钮进行选择">
              <el-option v-for=" item, i in roleArrs " :key="i" :label="item.name" :value="item.id">
              </el-option>
            </el-select>
          </div>
        </el-form-item>





        <el-form-item label="用户状态:" :label-width="formLabelWidth" class="formItemStyle">
          <el-radio-group v-model="insertForm.status">
            <el-radio label='1'>正常</el-radio>
            <el-radio label='2'>禁用</el-radio>
          </el-radio-group>
        </el-form-item>


      </el-form>
      <el-divider></el-divider>
      <div slot="footer" style="display: flex;justify-content: space-evenly;align-items: center;height: 60px;">
        <el-button @click="AddUserPopShow = false">取 消</el-button>
        <el-button type="primary" @click="AddUserPopOk('insertForm')">确
          定</el-button>

      </div>

    </el-dialog>


    <!-- 选择角色弹窗 -->
    <el-dialog class="dialogStyle" :close-on-click-modal="false" width="600px" title="绑定角色"
      :visible.sync="selectUserPopShow">
      <el-divider></el-divider>
      <el-input :value="`已选择${selectUserPopTotal}项`" placeholder="" disabled></el-input>
      <!-- 筛选项 -->
      <div style="display: flex;justify-content: space-between;margin: 20px 0;">
        <el-input size="medium" style="width: 200px;" v-model="selectUserPopKeyName" placeholder="根据角色名称搜索"></el-input>
        <el-select disabled size="medium" style="width: 262px" placeholder="请选择所属单位" v-model="selectUserPopKeyType"
          clearable>
          <el-option v-for=" item, i in unitTypeData " :key="i" :label="item.label" :value="item.value"></el-option>

        </el-select>
        <el-button size="medium" type="primary" @click="getSelectUserPopData">查询</el-button>
      </div>

      <div class="tableBox">
        <el-table ref="selectUserPopTable" @selection-change="selectUserPopChange" :data="selectUserPopData"
          style="width: 100%" height="400px">
          <el-table-column type="selection" width="55">
          </el-table-column>
          <el-table-column align="center" prop="name" label="角色名称">
          </el-table-column>
          <el-table-column align="center" prop="unitTypeName" label="角色类型" width="180">
          </el-table-column>
        </el-table>
      </div>
      <el-divider></el-divider>
      <div slot="footer" style="display: flex;justify-content: space-evenly;align-items: center;height: 60px;">
        <el-button @click="selectUserPopNot">取 消</el-button>
        <el-button type="primary" @click="selectUserPopOk">确
          定</el-button>
      </div>

    </el-dialog>
    <!-- 选择房间弹窗结束 -->

    <!-- 选择单位弹窗 -->
    <el-dialog class="dialogStyle" :close-on-click-modal="false" width="600px" title="选择单位"
      :visible.sync="selectUnitPopShow">
      <el-divider></el-divider>
      <!-- 筛选项 -->
      <div style="display: flex;justify-content: space-between;margin: 20px 0;">
        <el-input size="medium" style="width: 200px;" v-model="selectUnitPopKeyName" placeholder="根据单位名称搜索"></el-input>
        <el-select disabled size="medium" style="width: 262px" placeholder="请选择所属单位" v-model="selectUnitPopKeyType"
          clearable>
          <el-option v-for=" item, i in unitTypeData " :key="i" :label="item.label" :value="item.value"></el-option>
        </el-select>
        <el-button size="medium" type="primary" @click="getSelectUnitPopData">查询</el-button>
      </div>

      <div class="popTableStyle">
        <el-table ref="selectUnitPopTable" @current-change="selectUnitPopChange" :data="selectUnitPopData"
          style="width: 100%" height="400px" highlight-current-row>
          <el-table-column align="center" prop="unitName" label="单位名称">
          </el-table-column>
          <el-table-column align="center" prop="unitType" label="单位类型" width="180">
            <template slot-scope="scope">
              {{ scope.row.unitType == 'agency' ? '机关' : scope.row.unitType
                == 'company' ? '机构' : '系统' }}
            </template>
          </el-table-column>
        </el-table>
      </div>
      <el-divider></el-divider>
      <div slot="footer" style="display: flex;justify-content: space-evenly;align-items: center;height: 60px;">
        <el-button @click="selectUnitPopNot">取 消</el-button>
        <el-button type="primary" @click="selectUnitPopOk">确
          定</el-button>
      </div>

    </el-dialog>
    <!-- 选择单位弹窗结束 -->

    <!-- 分页器 -->
    <myPagination :total="totalSize" :pageNum="pageNum" @PageChange="PageChange" @pageSizeChange="pageSizeChange">
    </myPagination>

  </div>
</template>





<script>

import {

  deleteUser,
  changePublic

} from "./user";

export default {
  data() {
    var validateAccount = async (rule, value, callback) => {
      if (value === '') {
        callback(new Error('用户账号不能为空'));
      } else {
        const reg = /^1[3456789]\d{9}$/
        if (reg.test(value)) {
          // 进行手机号验重，。。。
          let res = await this.$api.system.myCheckAccount(value, this.id)
          if (res.code != 200) {
            callback(new Error(res.message));
          } else {
            callback();
          }
        } else {
          callback(new Error('请输入正确的手机号'));
        }
      }
    };
    return {
      userData: [], //用户数据
      query: {
        //左上角查询input
        userCode: "",
        userName: "",
      },
      insertForm: {
        // 新增弹框参数
        account: "",
        name: "",
        password: "",
        status: "1",
        depId: [],
        roleIds: [],
      },
      insertRules: {
        name: [{ required: true, message: "用户名称不能为空", trigger: "blur", },],
        account: [
          { required: true, message: "用户账号不能为空", trigger: "blur", },
          { validator: validateAccount, trigger: 'blur' }
        ],
        password: [
          { required: true, message: "用户密码不能为空", trigger: "blur", },
        ],
        unitType: [
          { required: true, message: "请选择用户类型", trigger: "change", },
        ],
        unitName: [
          { required: true, message: "请选择所属单位", trigger: "change", },
        ],
      },
      AddUserPopShow: false, //控制弹框开关
      formLabelWidth: "120px", //控制前面label的宽度
      totalSize: 1,
      pageNum: 1,
      pageSize: 10,
      props: {
        label: 'name',
        children: 'children',
        multiple: true
      },
      unitType: 'system',
      LoginUserData: {},//登录用户的信息
      // 选择用户弹窗
      selectUserPopShow: false,//选择角色弹窗显隐
      selectUserPopTotal: 0,
      selectUserPopKeyName: '',
      selectUserPopKeyType: '',
      selectUserPopData: [],
      selectUserPopCacheArr: [],//暂存区

      // 选择单位弹窗
      selectUnitPopShow: false,//选择角色弹窗显隐
      selectUnitPopKeyName: '',
      selectUnitPopKeyType: '',
      selectUnitPopData: [],
      selectUnitPopCache: {},//暂存区
      // 添加用户弹窗
      AddUserPopScene: 'add',
      unitTypeData: [],
      id: 0, //校验手机号用的id
      roleArrs: [],// 用户角色下拉框
    };
  },
  activated() {
    // 清空筛选项
    this.$set(this.query, 'userCode', '')
    this.$set(this.query, 'userName', '')
    this.$set(this.query, 'userType', '')
    this.$set(this.query, 'userState', '')

    this.LoginUserData = JSON.parse(sessionStorage.getItem('logOnUser'))
    this.unitType = this.LoginUserData.unitType;
    switch (this.LoginUserData.unitType) {
      case 'system':
        this.unitTypeData = [
          { label: '系统管理员', value: 'system' },
          { label: '机关管理员', value: 'agency' },
          { label: '机构管理员', value: 'company' },
        ]
        break
      case 'agency':
        this.unitTypeData = [
          { label: '机关管理员', value: 'agency' },
        ]
        break
      case 'company':
        this.unitTypeData = [
          { label: '机构管理员', value: 'company' },
        ]
        break
    }

    this.queryUserList();
  },
  methods: {
    async accountBlur() {
      if (this.AddUserPopScene === 'add' && this.insertForm.account) {
        
        let res = await this.$api.axios.get('/auth/user/getAppUserInfo?account=' + this.insertForm.account)
        if (res && res.data && res.data.password) {
          this.$set(this.insertForm, 'password', res.data.password)
        }
      }

    },
    // 新增修改删除 按钮========================================
    addClick() {
      this.AddUserPopShow = true
      this.AddUserPopScene = 'add'
      this.id = 0
      this.$set(this.insertForm, 'account', '')
      this.$set(this.insertForm, 'name', '')
      this.$set(this.insertForm, 'password', '')
      this.$set(this.insertForm, 'unitType', '')
      this.$set(this.insertForm, 'createUnitId', null)
      this.$set(this.insertForm, 'roleIds', [])
      this.$set(this.insertForm, 'status', '1')
      this.roleArrs = []


      switch (this.LoginUserData.unitType) {
        case 'system':
          this.$set(this.insertForm, 'unitName', '')
          break
        case 'agency':
          this.$set(this.insertForm, 'unitName', this.LoginUserData.unitName)
          this.$set(this.insertForm, 'unitType', this.LoginUserData.unitType)
          this.$set(this.insertForm, 'createUnitId', this.LoginUserData.unitId)
          break
        case 'company':
          this.$set(this.insertForm, 'unitName', this.LoginUserData.unitName)
          this.$set(this.insertForm, 'unitType', this.LoginUserData.unitType)
          this.$set(this.insertForm, 'createUnitId', this.LoginUserData.unitId)
          break
      }





      this.$nextTick(() => {
        this.$refs.insertForm.clearValidate()
      })
    },
    async UpdateClick(row) {
      this.AddUserPopScene = 'update'
      this.id = row.id;
      console.log(row, '所在行');
      let res = await this.$api.system.myGetUserInfoById({
        "userId": row.id, //用户id  必填
        "unitType": this.LoginUserData.unitType, //必填 机关：agency  机构：company  系统：system 
        "unitId": this.LoginUserData.unitId, //系统传0   所属单位匹配当前登录单位，系统不显示单位
        unitName: this.LoginUserData.unitName,
      })
      console.log(res, '详情信息');
      if (res.code == 200) {

        this.roleArrs = []
        res.data.roleIds.forEach((el, i) => {
          this.roleArrs.push({
            name: res.data.roleNameArray[i],
            id: el
          })
        })

        this.AddUserPopShow = true
        this.$set(this.insertForm, 'id', res.data.id)
        this.$set(this.insertForm, 'account', res.data.account)
        this.$set(this.insertForm, 'name', res.data.name)
        this.$set(this.insertForm, 'password', res.data.password)
        this.$set(this.insertForm, 'unitType', res.data.unitType)
        this.$set(this.insertForm, 'unitName', res.data.unitNameList)
        this.$set(this.insertForm, 'createUnitId', res.data.createUnitId)
        this.$set(this.insertForm, 'roleIds', res.data.roleIds)
        this.$set(this.insertForm, 'status', res.data.status.toString())



      } else {
        this.$message.error(res.message)
      }
      this.$nextTick(() => {
        this.$refs.insertForm.clearValidate()
      })
    },
    deleteUserById(row) {
      this.$confirm("确认删除该用户吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        var id = row.id;
        deleteUser(id).then((res) => {
          if (res.code == 200) {
            this.$message({
              message: "删除成功",
              type: "success",
            });
            this.queryUserList();
          } else {
            this.$message({
              message: res.message,
              type: "warning",
            });
          }
        });

      }).catch(() => {
        this.$message({
          type: "info",
          message: "已取消删除",
        });
        return;
      });
    },
    // 添加用户弹窗==============================================
    unitTypeChange() { //角色类型发生变化时，要清空选择的单位

      this.insertForm.unitName = ''
      this.insertForm.createUnitId = ''
      this.insertForm.roleIds = []
      this.roleArrs = []
    },
    changeUserSelect(val) {
      this.insertForm.roleIds = val
    },
    async toSelectUser() { //点击去选择用户角色
      if (!this.insertForm.unitType) {
        this.$message.error('请先选择用户类型')
        return
      }

      if (!this.insertForm.createUnitId && (this.insertForm.unitType == 'agency' || this.insertForm.unitType == 'company')) {
        this.$message.error('请先选择单位')
        return
      }

      this.selectUserPopShow = true
      this.selectUserPopTotal = this.insertForm.roleIds.length
      this.selectUserPopKeyName = ''
      this.selectUserPopKeyType = this.insertForm.unitType
      this.getSelectUserPopData()
    },
    async toSelectUnit() {//点击去选择单位
      this.selectUnitPopShow = true
      this.selectUnitPopKeyName = ''
      this.selectUnitPopKeyType = this.insertForm.unitType
      this.getSelectUnitPopData()
    },
    AddUserPopOk(insertForm) { //添加用户点击确定按钮
      console.log(this.insertForm.createUnitId, 'createUnitId');
      this.$refs[insertForm].validate(async (valid) => {
        if (valid) {
          if (this.insertForm.roleIds.length == 0) {
            this.$message.error('请绑定角色')
            return
          }
          let createUnitId = 0
          switch (this.LoginUserData.unitType) {
            case 'system':
              if (this.insertForm.unitType == 'system') {
                createUnitId = 0
              }
              if (this.insertForm.unitType == 'agency') {
                if (!this.insertForm.createUnitId) {
                  this.$message.error('请选择所属单位')
                  return
                } else {
                  createUnitId = this.insertForm.createUnitId
                }

              }
              if (this.insertForm.unitType == 'company') {
                if (!this.insertForm.createUnitId) {
                  this.$message.error('请选择所属单位')
                  return
                } else {
                  createUnitId = this.insertForm.createUnitId
                }
              }
              break
            case 'agency':
              createUnitId = this.LoginUserData.unitId
              break
            case 'company':
              createUnitId = this.LoginUserData.unitId
              break
          }
          this.$confirm('是否提交?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(async () => {

            switch (this.AddUserPopScene) {
              case 'add':

                let { account, name, password, unitType, roleIds, status } = this.insertForm

                let params = {
                  account, name, password,
                  unitType, roleIds, status,
                  createUnitId
                }
                let res = await this.$api.system.myInsertUser(params)
                if (res.code == 200) {
                  this.$message({
                    message: '新增成功',
                    type: 'success'
                  });
                  this.queryUserList()
                  this.AddUserPopShow = false
                } else {
                  this.$message.error(res.message)
                }
                break
              case 'update':
                let updateRes = await this.$api.system.myUpdateUserInfoById({
                  "id": this.insertForm.id,
                  "account": this.insertForm.account, //用户账号，手机号 必填  填完后立即调用校验接口进行校验
                  "name": this.insertForm.name, //用户姓名,必填
                  "password": this.insertForm.password, //用户密码，必填
                  "unitType": this.insertForm.unitType, //用户类型，必填 机关agency 机构company 系统system
                  "createUnitId": createUnitId, //单位id 系统传0
                  "roleIds": this.insertForm.roleIds, //用户角色id数组
                  "status": this.insertForm.status //用户状态：1正常2禁用
                })
                if (updateRes.code == 200) {
                  this.$message({
                    message: '修改成功',
                    type: 'success'
                  });
                  this.queryUserList()
                  this.AddUserPopShow = false
                } else {
                  this.$message.error(updateRes.message)
                }
                break
            }
          }).catch(() => {

          });

        }
      });
    },
    // ==============================================添加用户弹窗





    // 角色列表弹窗==============================================

    async getSelectUserPopData() { //获取角色列表数据
      let res = await this.$api.system.myUserGetRoleList({
        "name": this.selectUserPopKeyName, //角色名称
        "unitType": this.selectUserPopKeyType, //必填 和账号类型一致 机关：agency  机构：company  系统：system 
        "unitId": this.insertForm.createUnitId,
        "isSuperAdmin": 2,
      })
      console.log(res, '选择角色的角色列表');
      if (res.code == 200) {
        this.selectUserPopData = res.data
        this.$nextTick(() => {
          this.selectUserPopData.forEach((el, i) => {
            this.insertForm.roleIds.forEach(ell => {
              if (el.id == ell) {
                this.$refs.selectUserPopTable.toggleRowSelection(this.selectUserPopData[i], true)
              }
            })
          })
        })
      } else {
        this.$message.error(res.message)
      }
    },
    selectUserPopNot() {//选择角色取消按钮
      this.selectUserPopShow = false
    },
    selectUserPopOk() { //选择角色确认按钮
      this.insertForm.roleIds = []
      this.roleArrs = this.selectUserPopCacheArr
      this.selectUserPopCacheArr.forEach(el => {
        this.insertForm.roleIds.push(el.id)
      })
      this.selectUserPopShow = false
    },
    selectUserPopChange(val) {
      this.selectUserPopTotal = val.length
      this.selectUserPopCacheArr = val
    },
    // ======================================角色列表弹窗


    // 单位列表弹窗==============================================

    async getSelectUnitPopData() { //获取单位列表数据
      let logOnUser = JSON.parse(sessionStorage.getItem('logOnUser'))
      let res = await this.$api.system.myGetUnitByType({
        "name": this.selectUnitPopKeyName,
        "unitId": logOnUser.unitId,
        "unitType": this.selectUnitPopKeyType,
      })
      console.log(res, '选择单位的列表');
      if (res.code == 200) {
        this.selectUnitPopData = res.data
        this.$nextTick(() => {
          if (!this.insertForm.createUnitId) { //如果没选择就点确定，或者第一次打开，先清空预存的值
            this.selectUnitPopCache = {}
            return
          }
          this.selectUnitPopData.forEach((el, i) => {
            if (el.unitId == this.insertForm.createUnitId) {
              this.$refs.selectUnitPopTable.setCurrentRow(this.selectUnitPopData[i])
            }
          })
        })
      } else {
        this.$message.error(res.message)
      }
    },
    selectUnitPopNot() {//选择单位取消按钮
      this.selectUnitPopShow = false
    },
    selectUnitPopOk() { //选择单位确认按钮

      this.insertForm.createUnitId = this.selectUnitPopCache.unitId
      this.insertForm.unitName = this.selectUnitPopCache.unitName
      this.selectUnitPopShow = false
      //定位
      this.roleArrs = []
      this.insertForm.roleIds = []
    },
    selectUnitPopChange(val) { //预选
      console.log(val);
      this.selectUnitPopCache = val
    },
    // ======================================单位列表弹窗


    // 主列表=========================================
    pageSizeChange(e) {
      this.pageNum = 1
      this.pageSize = e
      this.queryUserList()
    },
    PageChange(e) {
      this.pageNum = e
      this.queryUserList()
    },
    SouSuo() {
      this.pageNum = 1
      this.queryUserList()
    },
    Reset() {
      this.pageNum = 1
      this.$set(this.query, 'userCode', '')
      this.$set(this.query, 'userName', '')
      this.$set(this.query, 'userState', '')
      this.$set(this.query, 'userType', '')
      this.queryUserList()
    },
    async queryUserList() { //按条件查询菜单列表
      let userData = JSON.parse(sessionStorage.getItem('logOnUser'))
      let unitName = userData.unitName;
      if (!unitName) unitName = ''
      let params
      if (userData.unitType == 'system') {
        params = {
          "account": this.query.userCode, //账号
          "name": this.query.userName, //用户名
          "unitType": userData.unitType, //机关：agency  机构：company  系统：system
          "unitId": userData.unitId, //系统传0
          "unitName": unitName, //单位名称，系统""
          "status": this.query.userState, //状态： 1正常2禁用
          paramUnitType: this.query.userType,
          pageSize: this.pageSize,
          pageNum: this.pageNum
        }
      } else {
        params = {
          "account": this.query.userCode, //账号
          "name": this.query.userName, //用户名
          "unitType": userData.unitType, //机关：agency  机构：company  系统：system
          "unitId": userData.unitId, //系统传0
          "unitName": unitName, //单位名称，系统""
          "status": this.query.userState, //状态： 1正常2禁用
          pageSize: this.pageSize,
          pageNum: this.pageNum
        }
      }
      let res = await this.$api.system.myGetUserList(params)
      if (res.code == 200) {
        if (res.data.list.length < 1 && this.pageNum != 1) { //判断，当搜索关键字有内容时，我直接点击分页，会造成关键词列表中没有某某页的数据，那么我就用第一页重新请求一次
          this.pageNum = 1
          this.queryUserList()
          return
        }
        this.userData = res.data.list;
        this.totalSize = res.data.total;
      } else {
        this.$message.error(res.message)
      }

    },
    // 列表 ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑



















    //打开账号绑定窗口 并回显账号信息
    openBindingForm(row) {

      if (row.status == 0) {
        this.$message({
          message: '禁用账号无法绑定操作',
          type: "warning",
        });
        return;
      }


      var id = row.id;
      this.$router.push({ path: '/user/userBinding', query: { id: id, operateType: 'update' } });
    },

    changePublic(row) {

      console.info(row)
      if (row.unitType != 'company') {
        this.$message({
          message: '只有机构可以修改用户的公开状态',
          type: "warning",
        });
        return;
      }
      let isPublic = 0;
      if (row.isPublic == 1) {
        isPublic = 1;
      }


      changePublic(
        row.id,
        isPublic
      ).then((res) => {
        if (res.data.code == 200) {
          this.$message({
            message: "修改成功",
            type: "success",
          });
          this.AddUserPopShow = false;
          // this.queryUserList();
          // history.go(0) 
        } else {
          this.$message({
            message: res.data.message,
            type: "warning",
          });
        }
      });

    }


  },
};
</script>
<style lang="less" scoped>
.popTableStyle {
  /deep/ .el-table {
    .has-gutter {
      .is-leaf {
        background-color: #efefef;
      }
    }

    .el-table__body tr.current-row>td.el-table__cell {
      background-color: #409eff;

      .cell {
        color: white;
        font-weight: 600;
      }
    }
  }
}

.no-autofill-pwd {
  /deep/ .el-input__inner {
    -webkit-text-security: disc !important;
  }
}

.dialogStyle {
  /deep/ .el-dialog {
    border-radius: 20px;

    .el-dialog__body {
      padding: 0 20px;

      .el-divider {
        margin: 20px 0;
      }
    }

    .el-dialog__footer {
      padding: 0;
    }
  }
}

.textBtn {
  position: relative;

  /deep/ .el-row {
    display: flex;
    justify-content: center;
  }

  .el {
    display: block;
    position: relative;

    &:nth-child(n+2) {

      // border-left: 1px solid #aaa;
      &::after {
        position: absolute;
        left: -1px;
        top: 50%;
        content: '';
        width: 2px;
        transform: translateY(-50%) scale(0.5, 1);
        height: 10px;
        background-color: #aaa;
      }
    }
  }
}

.menuTable {
  margin-top: 100px;
}

.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}

.menuTable .cell {
  text-align: center;
}

.Top {
  position: relative;

  .operation {
    position: absolute;
    left: 15px;
    top: 68px;
  }
}





.bindingFormStyle {
  width: 5300px;
  margin: 0 auto;



}

.formItemStyle {
  margin-bottom: 22px;
  margin-left: 22px;
}

.pageFooter {
  margin-top: 3%;
  margin-left: 40%;
}

.pageFooterFather {
  top: 84%;
  position: relative;
  width: 100%;
}

.el-cascader-menu {
  height: fit-content;
  width: fit-content;
}
</style>